<!doctype html>
<html>
<head>
<script src="../src/cge.js"></script>
<script src="../src/fps.js"></script>
<script src="../src/canvas.js"></script>
<script src="../src/gradient.js"></script>
<script src="../src/text.js"></script>

<script>
function init ()
{
	function _wait ( cback )
	{
		if ( CGE.ready () ) 
			cback ();
		else
			setTimeout ( function () { _wait ( cback ); }, 500 );
	}

	CGE.canvas_handler.add ( "screen", 400, 350 );

	_wait ( app_start );
}

function app_start ()
{
	console.debug ( "APP START" );

	var c = CGE.canvas_handler.get ( "screen" );
	
	c.render ( "dest_canvas" );
	c.color_clear = "#ffffff";

	var gr = CGE.gradient_handler.add ( "v", "background", 600 );

	gr.add ( 0, "#000044" );
	gr.add ( 1, "#3333cc" );

	var txt = CGE.text_handler.add ( "t1", "Hello World", 40, "serif" );

	txt.fill = "#ffffff";

	CGE.render ( render, 30 );

	// CGE.fps.debug = true;
}

var _alpha = 100, _delta = -3;
function render ()
{
	var g = CGE.gradient_handler.get ( "background" );
	var t = CGE.text_handler.get ( "t1" );

	g.blit ( 0,0, 800, 600 );

	// i.rotate ( _deg );
	// i.zoom ( 50 );
	// i.blit ( _x, _y, _alpha );

	t.draw ( _alpha, 100, _alpha );

	_alpha += _delta;

	if ( _alpha <= 0 )
	{
		_alpha = 0;
		_delta = 3;
	} else {
		if ( _alpha > 100 )
		{
			_alpha = 100;
			_delta = -3;
		}
	}
}
</script>
</head>
<body onload="init()">

<div id="dest_canvas" style="border: 2px dotted black; padding: 8px; float: left;"></div>


</body>
</html>
